<template>
    <view class="container" :style="{ display: visible ? 'block' : 'none' }">
        <scroll-view scroll-y style="height: 100vh">
            <view class="paddingBottomBar">
                <header-bar :config="config"></header-bar>
                <view class="pure-top"></view>
                <view class="info">
                    <image src="/static/img/mebg.png" alt="" class="mebg"></image>
                    <image class="info-avatar" :src="userInfo.HeadImg ? userInfo.HeadImg : easyGetDefalutAvatar()">
                    </image>
                    <view class="info-main">
                        <view class="name">{{ userInfo.RealName }}</view>
                        <view class="desc">{{ userInfo.PositionName }}</view>
                    </view>
                </view>
                <view class="service" v-if="false">
                    <easy-cell-item icon="headphones" label="客户服务" value="" :showArrowRight="false"></easy-cell-item>
                    <view class="service-list">
                        <view class="service-item">
                            <view class="item-header">
                                <uni-icons class="item-icon" type="chat-filled"></uni-icons>
                                <text class="item-name">在线咨询</text>
                            </view>
                            <text class="item-desc">常见问题解答</text>
                        </view>
                        <view class="service-item">
                            <view class="item-header">
                                <uni-icons class="item-icon" type="phone-filled"></uni-icons>
                                <text class="item-name">客服热线</text>
                            </view>
                            <text class="item-desc">7X12小时人工服务</text>
                        </view>
                    </view>
                </view>
                <view class="menu">
                    <view class="cell-group">
                        <easy-cell-item icon="paperclip" label="跳转小程序" @click.native="goMini"
                            v-if="false"></easy-cell-item>
                        <easy-cell-item icon="person" label="个人信息"
                            @click.native="easyGoTo('/pages/me/info')"></easy-cell-item>
                        <easy-cell-item icon="locked" label="修改密码"
                            @click.native="easyGoTo('/pages/me/changePwd')"></easy-cell-item>
                        <easy-cell-item icon="flag" v-if="role && typeId" label="车辆信息"
                            @click.native="easyGoTo('/pages/me/carInfo')"></easy-cell-item>
                        <easy-cell-item icon="gear" label="设置"
                            @click.native="easyGoTo('/pages/me/setting')"></easy-cell-item>
                        <easy-cell-item icon="gear" label="业务员销售分析"
                            @click.native="easyGoTo('/pages/customer/salesmanAnalyse')"></easy-cell-item>
                        <easy-cell-item icon="gear" label="客户分析"
                            @click.native="easyGoTo('/pages/customer/clientAnalyse')"></easy-cell-item>

                        <!--  <view @click="easyGoTo('/pages/addProduct/index')" style="margin: 15px;">添加商品</view>
                            <view @click="easyGoTo('/pages/productManage/index')" style="margin: 15px;">商品管理</view> -->
                    </view>
                    <view class="bei-an">闽ICP备15022977号-18A</view>
                </view>

            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex"
import storage from "@/uni-sub-base/utils/storage.js"
import easyCellItem from "@/components/easy/easy-cell-item.vue"
import easyCellButton from "@/components/easy/easy-cell-button.vue"

import config from "@/config/config.js"
import { GetGuideInfo } from "@/service/api/user.js"
import pic_url from "@/static/img/mebg.png"
import { getGuideInfo } from "@/utils/appInit.js"
import { VehicleBingInfo } from "@/pages_tms/service/logistics.js"
export default {
    components: {
        easyCellItem,
        easyCellButton,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                this.$nextTick(() => { })
            },
            immediate: true,
        },
        getUpMeView(e) {
            this.userInfo = storage.getCache("userInfo")
            this.$forceUpdate()
        },
    },
    computed: {
        ...mapGetters(["getUpMeView"]),
    },
    data() {
        return {
            config: {
                title: "个人中心",
                back: false,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
                statusBarFontColor: "#ffffff",
            },
            pic_url: pic_url,
            userInfo: {},
            datas: [],
            typeId: "",
            role: false
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
        this.typeId = storage.getCache("typeId")
    },
    mounted() {
        this.getGuideInfo()
    },
    methods: {
        getGuideInfo() {
            getGuideInfo().then((res) => {
                this.userInfo = res;
                let PositionNameList = this.userInfo.PositionName.split(',');
                PositionNameList.forEach((item) => {
                    if (item == '配送员') {
                        this.role = true
                        VehicleBingInfo().then((rsp) => {
                            if (rsp.State == 1) {
                                this.typeId = rsp.Data.typeId
                            }
                        })
                    }
                })
            })
        },
        goUrl(item) {
            let url = item
            this.easyGoTo(url)
        }
    },
}
</script>

<style lang="scss">
.pure-top {
    width: 100%;
    height: 282rpx;
    position: relative;
    z-index: 0;
    overflow: hidden;

    &:after {
        content: "";
        width: 120%;
        height: 282rpx;
        position: absolute;
        left: -10%; //椭圆左边隐藏10%，右边隐藏10%
        top: 0;
        border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
        background: $app-color-main;
    }
}

.info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background: #fff;
    height: 336rpx;
    align-items: center;
    margin: 0 24rpx;
    margin-top: -258rpx;
    border-radius: 16rpx;

    .mebg {
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
    }

    .info-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin: 40rpx 0 20rpx 0;
    }

    .info-main {
        .name {
            display: flex;
            font-size: $font-size-36;
            font-weight: bold;
            margin-bottom: 20rpx;
            color: $color-gray-1;
            justify-content: center;
        }

        .desc {
            display: flex;
            font-size: $font-size-28;
            color: $color-gray-3;
            justify-content: center;
        }
    }
}

.service {
    background: $color-white;
    border-bottom: solid 1rpx $border;

    .service-list {
        display: flex;
        flex-direction: row;
        padding: $app-page-padding;
        justify-content: space-between;

        .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .item-header {
                .item-icon {
                    margin-right: 20rpx;
                }

                .item-name {
                    font-size: $font-size-30;
                }
            }

            .item-desc {
                color: $app-color-text-tip;
                font-size: $font-size-28;
            }
        }
    }
}

.cell-group {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: #ffffff;
}

.menu {
    padding: 24rpx;
}
</style>
